<template>
  <div>
    <div class="search-box">
      <el-input class="mr-10" v-model="searchValue" placeholder="请输入过滤名称" clearable></el-input>
      <el-button type="search" size="small" @click="onSearch">查询</el-button>
    </div>
    <div class="box-body" :style="{ height: treeHeight + 'px' }">
      <el-tree ref="ddTree" 
        :props="{ value: 'code', label: 'name', children: 'children', emitPath: false, }"
        :data="treeData" 
        :default-expanded-keys="expandedList" 
        highlight-current 
        :current-node-key="currentNodeKey"
        node-key="code" 
        @node-click="handleNodeClick" 
        @node-contextmenu="handleNodeRightClick" 
        default-expand-all>
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span class="node-name" v-if="data.projectInfo"> {{ node.label }} ({{ data.projectInfo.appName }}) </span>
          <span class="node-name" v-else> {{ node.label }} </span>
          <span v-if="data.menu" @click.stop>
            <template>
              <el-dropdown trigger="click" @command="(command) => handleDropdownCommand(command, data)">
                <el-button type="text" size="mini" class="btn-text"> ... </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in nodeCommands" :key="index" :command="item.type">
                    {{ item.name }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dd-project-tree',
  props: {
    // 树结构数据
    treeData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 展开的节点
    expandedList: {
      type: Array,
      default: () => {
        return []
      }
    },
    currentNodeKey: {
      type: String,
      default: () => {
        return "";
      }
    },
    // 节点点击指令集
    nodeCommands: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      treeHeight: 0,
      searchValue: ''
    }
  },
  created() {
    this.treeHeight = window.innerHeight - 250
  },
  mounted() {
    this.treeHeight = window.innerHeight - 250
    window.onresize = () => {
      return (() => {
        this.treeHeight = window.innerHeight - 250
      })()
    }
  },
  methods: {
    // 点击节点的回调
    handleNodeClick(data, node, ref) {
      this.$emit("node-click", data);
    },
    // 右键点击节点的回调
    handleNodeRightClick(event, data, node, ref) {
      // this.$emit('node-contextmenu', event, data, node, ref)
    },
    // 节点下拉指令回调
    handleDropdownCommand(command, data) {
      this.$emit('node-command', command, data)
    },
    onSearch() {
      this.$emit('search', this.searchValue)
    }
  }

}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;

  .mr-10 {
    margin-right: 10px;
  }
}

.box-body {
  overflow-y: auto;
  margin-bottom: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  .node-name {
    flex: 1;
    width: 10em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .btn-text {
    font-weight: 800;
  }
}
</style>